fix: implement server-side rendering for EventList component #428
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add server-side data fetching in index.astro and past-events.astro - Pass events, books, and user data as props to EventList component - Initialize EventList with SSR data to prevent blank page without JS - Add client-side fallback for environments without SSR data - Improve accessibility by providing content to search engines and users without JavaScript Addresses #316 - page now shows events server-side instead of appearing blank 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
✅ Deploy Preview for eventua11y ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Add CSS override for astro-island:not(:defined) to ensure server-rendered content is visible even when JavaScript is disabled. This fixes the SSR issue where Vue components were hidden due to undefined custom elements. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
…ponent - Add StaticEventList.astro for server-side event rendering without JavaScript dependencies - Update index.astro and past-events.astro to use StaticEventList for SSR - Temporarily disable EventList Vue component progressive enhancement due to TypeScript errors - Fix event filtering using API pre-filtered data (future, past, today arrays) - Ensure events are visible to users without JavaScript and search engine crawlers - Follow Astro best practices without CSS workarounds Fixes: GitHub issue #316 - SSR not working properly Result: Pages now render complete event listings server-side for accessibility and SEO 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add StaticEventList.astro for pure server-side rendering without JavaScript dependencies - Implement progressive enhancement pattern with EventList.vue taking over when JS loads - Fix duplicate months in navigation by removing static container on client mount - Fix event sorting: past events now display in reverse chronological order - Ensure books always appear first within each month group - Both SSR and client-side rendering now have consistent sorting behavior Resolves issues with pages appearing blank without JavaScript and ensures proper accessibility and SEO with server-side rendered content. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Prevent MonthNav from detecting static server-rendered sections by using data-static-month attribute - Fix EventList to only add books to upcoming events, not past events - Filter out deadline events from past events in StaticEventList - Eliminates flash of duplicate months and incorrect events when JavaScript loads 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Use UTC methods for book dates to match EventList behavior - Filter out past months for upcoming events to prevent showing old content - Use Intl.DateTimeFormat for consistent date formatting across components - Transform book.date to book.dateStart and add _type field for proper rendering - Ensure server-rendered and client-rendered content are identical These changes eliminate visual differences between SSR and client-side rendering, preventing content shifts when JavaScript hydrates the page. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Fix duplicate element IDs by prefixing StaticEventList IDs with "static-" - Add TimezoneSelector independent user info fetching to resolve race condition - Update test timeouts and wait conditions for component hydration - Fix filter drawer test to wait for Vue components to fully load - Update timezone tests to wait for user info loading to complete All 24 E2E tests now pass successfully. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements a workaround, not the ideal Astro SSR pattern.
Current Approach (Workaround)
We've created a separate
StaticEventList.astrocomponent for pure server-side rendering alongside the existingEventList.vuecomponent. The static component renders on the server, and when JavaScript loads, EventList removes the static container and takes over.Why This Isn't Ideal
According to Astro's Islands architecture documentation:
The Ideal Approach Would Be
Why We Chose This Workaround
The Vue components weren't rendering properly during SSR, resulting in blank pages without JavaScript. The root cause appears to be related to how the Vue component initialization code runs and potentially issues with Astro's Vue SSR handling. This workaround ensures the site is accessible and SEO-friendly while we investigate a proper solution.
Changes
Core SSR Implementation
StaticEventList.astrocomponent for pure server-side rendering without JavaScript dependenciesEventList.vueto remove static content on mount, preventing duplicate renderingConsistency Fixes
Intl.DateTimeFormatNavigation Fixes
data-static-monthinstead ofdata-month)Test Fixes
Test Status
✅ All 24 E2E tests pass successfully
Test Plan
Future Work
Investigate why Vue components aren't properly SSR-ing in Astro and implement the proper pattern without duplicate components.
🤖 Generated with Claude Code